<template>
	<view>
		<view class="cu-bar bg-white solid-bottom">
			<view class="action text-gray">
				收货地址
			</view>
		</view>
		<view class="margin-bottom bg-white" @click="toAddress()">
			<view v-if="address" class="padding">
				<view class="flex align-center ">
					<view class="flex-sub">
						{{address.name}}
					</view>
					<view>{{address.phone}}</view>
				</view>
				<view class="text-grey text-sm padding-tb-sm">{{address.address}}</view>
			</view>
			<view v-else class="padding">
				<view class="text-grey text-sm padding-tb-sm text-center">选择地址</view>
			</view>
		</view>

		<view class="cu-bar bg-white solid-bottom">
			<view class="action text-gray">
				商品
			</view>
		</view>
		<view class="cu-list menu-avatar">
			<view class="cu-item" v-if="goods.pic">
				<view class="cu-avatar lg" :style="'background-image:url('+goods.pic[0]+');'">
				</view>
				<view class="content flex-sub">
					<view class="text-cut">{{goods.title}}</view>
					<view class="flex margin-top-xs justify-between">
						<view class="text-price text-lg">{{goods.price}}</view>
						<view>x{{goods.num}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white solid-top">
			<view class="action text-gray">
				商品总金额
			</view>
			<view class="action text-price text-red text-xl">
				{{total}}
			</view>
		</view>
		<view class="margin-top">
			<view class="cu-list menu">
				<view class="cu-item arrow" @click="show=true">
					<view class="content">
						<text class="text-grey">优惠券</text>
					</view>
					<view class="action">
						{{discount ? ('-'+discount):''}}
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white solid-top padding-lr cu-form-group">
			<textarea maxlength="-1" placeholder="请输入备注"></textarea>
		</view>

		<view class="foot-but-h"></view>
		<view class="foot-but">
			<view @click="addOrder()" class="cu-btn block bg-orange lg">
				立即支付
			</view>
		</view>

		<view class="cu-modal bottom-modal" :class="show?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action">使用优惠券</view>
					<view class="action" @click="show=false">取消</view>
				</view>
				<scroll-view style="height: 50vh" scroll-y="true">
					<view class="cu-list menu padding-top">
						<view class="cu-item margin-bottom" @click="clickCoupon(item)" v-for="(item,index) in coupon"
							:key="index">
							<view class="content flex">
								<view class="flex align-center solid-right padding-right">
									<radio class='radio green' :class="coupon_user_id==item.id?'checked':''"></radio>
								</view>
								<view class="solid-right flex-sub">
									<view class="padding-tb padding-lr text-left">
										<view>{{item.coupon.name}}</view>
										<view class=" margin-tb-xs text-sm" :class="index<2?'text-red':'text-gray'">
											{{item.end_time}}到期
										</view>
									</view>
								</view>
								<view class="text-center flex align-center padding-left">
									<view v-if="item.coupon.type == 1">
										<view class="text-price text-red text-xxl">{{item.coupon.amount}}</view>
										<view class="text-sm text-grey">优惠券</view>
									</view>
									<view v-else-if="item.coupon.type == 2">
										<view class="text-red text-xxl">{{item.coupon.discount}}</view>
										<view class="text-sm text-grey">折扣券</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import OrderApi from "@/api/order";
	import UserApi from "@/api/user"
	export default {
		data() {
			return {
				order: {
					address: "",
					address_tel: "",
					address_name: "",
				},
				key: "advance_address",
				goods: {},
				address: {},
				coupon: [],
				coupon_user_id: 0,
				total: '',
				show: false,
				discount: 0
			}
		},
		onLoad: function(option) {
			this.loadData(option.goods_id)
		},
		methods: {
			loadData(goods_id) {
				OrderApi.advance({
					goods_id: goods_id
				}).then((res) => {
					this.address = res.address || {}
					this.goods = res.goods
					this.coupon = res.coupon_user
					this.countTotal()
				})
			},
			addOrder() {
				if (!this.address.id) {
					uni.showToast({
						title: "请选择收货地址",
						icon: 'none'
					});
				}
				OrderApi.add({
					goods_id: this.goods.id,
					address_id: this.address.id,
					coupon_user_id: this.coupon_user_id
				}).then((res) => {
					this.onPay(res)
				})
			},
			onPay(jsSdk) {
				UserApi.jssdk({url: window.location.href}).then((res) => {
					jWeixin.config({
						debug: false,
						appId: res.appId, // 必填，公众号的唯一标识
						timestamp: res.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.nonceStr, // 必填，生成签名的随机串
						signature: res.signature, // 必填，签名
						jsApiList: res.jsApiList // 必填，需要使用的JS接口列表
					});
					jWeixin.ready(() => {
						jWeixin.chooseWXPay({
							timestamp: jsSdk.timeStamp,
							nonceStr: jsSdk.nonceStr,
							package: jsSdk.package,
							signType: jsSdk.signType,
							paySign: jsSdk.paySign, // 支付签名
							success: (payRes) => {
								// 支付成功后的回调函数
								uni.navigateTo({
									url: '/pages/order/success?order_id=' + jsSdk
										.order_id
								});
							}
						});
					});
				})
			},
			toAddress() {
				uni.navigateTo({
					url: '/pages/user/address/address?key=' + this.key
				});
			},
			countTotal() {
				let total = this.goods.price;
				if (this.coupon_user_id) {
					total = total + this.discount
				}
				this.total = total;
			},
			clickCoupon(item) {
				this.coupon_user_id = item.id
				this.discount = item.coupon.amount
				this.countTotal()
				this.show = false
			}
		},
		onShow() {
			let address = uni.getStorageSync(this.key);
			if (address) {
				this.address = address
			}
		}
	}
</script>

<style>

</style>
